<template>
    <button @click="flag = true">显示猫</button>
    <button @click="flag = false">显示狗</button>
    <!-- 相对路径 -->
    <!-- <img src="./assets/img/cat.jpg"/> -->
    <!-- 绝对路径：@就是src对应的目录 -->
    <!-- <img id="cat" v-if="flag" src="@/assets/img/cat.jpg"/>
    <img id="dog" v-else src="/src/assets/img/dog.jpg"/> -->
    <!-- v-show来实现 -->
    <br/>
    <img id="cat" v-show="flag" src="@/assets/img/cat.jpg"/>
    <img id="dog" v-show="!flag" src="/src/assets/img/dog.jpg"/>
</template>
<script setup>
import { ref } from 'vue'
const flag = ref(true)
</script>
<style scoped>
    
</style>